<template>
  <div class="mydiv">
    <div class="sel">
      <el-select
        v-model="value1"
        placeholder="请选择学院"
        @change="setCollege(value1)"
      >
        <el-option
          v-for="item in optionscollege"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select

        v-model="value2"
        placeholder="请选择教师"
        @change="setTeacher(value2)"
      >
        <el-option
          v-for="item in optionsteacher"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select

        v-model="value3"
        placeholder="请选择课程"
        @change="setCourse(value3)"
      >
        <el-option
          v-for="item in optionscourse"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select

        v-model="value4"
        placeholder="请选择任务"
        @change="setWork(value4)"
      >
        <el-option
          v-for="item in optionswork"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="echarts">
      <div id="firstechart"></div>
      <div id="secondechart"></div>

          <div id="thirdechart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 引入echarts
export default {
  name: "firstechart",

  data() {
    return {
      value1: "默认学院",
      value2: "默认教师",
      value3: "默认课程",
      value4: "默认任务",
      optionscollege: [], //学院选择
      optionsteacher: [], //教师选择
      optionscourse: [], //课程选择
      forcourselist: ["admin，您还没有进行选择"],
      optionswork: [], //任务选择
      workList: [],
      echartList: [],
      echartLists: [],
      echartvalo: [],
      coursedataarr: [0], //计算人数的数组
      nameone: "Select",
      nametwo: "Select",
    };
  },
  methods: {
    getNameone(e) {
      this.nameone == e;
    },
    getNametwo(e) {
      this.nametwo == e;
      console.log(this.nametwo);
    },
    async getData() {
      let collegelist = await this.$axios.get("/dashboard/getcollege"); //查询学院列表
      console.log(collegelist.res);
      this.optionscollege = collegelist.res.map((item) => {
        return {
          value: item.institute_id,
          label: item.institute_name,
        };
      });
      console.log(this.optionscollege);
    },
    async setCollege(val) {
      console.log(val); //传的是institute_id
      let teacherlist = await this.$axios.post("/dashboard/getteacher", {
        id: val,
      }); //根据学院查询老师列表
      this.optionsteacher = teacherlist.res.map((item) => {
        return {
          value: item.teacher_id,
          label: item.teacher_name,
        };
      });
      console.log(this.optionsteacher);
      (this.value2 = ""), (this.value3 = ""), (this.value4 = "");
    },

    async setTeacher(val) {
      this.forcourselist = [];
      console.log(val); //传的是teacher_id
      let courselist = await this.$axios.post("/dashboard/getcourse", {
        id: val,
      }); //根据老师查询课程列表
      console.log(courselist, "需要的数据");
      this.optionscourse = courselist.res.map((item) => {
        this.forcourselist.push(item.course_name);
        return {
          value: item.course_id,
          label: item.course_name,
        };
      });
      this.coursedataarr = courselist.arr;
      console.log(this.optionscourse);
      (this.value3 = ""), (this.value4 = ""), this.initEchart();
    },
    async setCourse(val) {
      console.log(val); //传的是course_id
      let worklist = await this.$axios.post("/dashboard/getWork", {
        id: val,
      }); //根据课程查看任务发布情况
      this.optionswork = worklist.res.map((item) => {
        return {
          value: item.assignment_id,
          label: item.assignment_title,
        };
      });
      console.log(worklist);
      this.echartList = worklist.res;
      console.log(this.echartList);
      this.nameone = worklist.nameone[0].course_name;
      this.getInit();
      this.getSecond();
      this.value4 = "";
    },
    async setWork(val) {
      console.log(val); //传的是assignment_id
      let donelist = await this.$axios.post("/dashboard/getDone", {
        id: val,
      }); //根据任务查看学生作业完成情况
      this.nametwo = donelist.nametwo[0].assignment_title;
      console.log(donelist);
      this.echartLists = donelist;
      console.log(this.echartLists);
      await this.getSecond();
    },
    getSecond() {
      if (
        !this.echartLists.unpublish &&
        !this.echartLists.published &&
        !this.echartLists.draft
      ) {
        this.echartvalo = [
          {
            value: 1,
            name: "",
          },
          {
            value: 0,
            name: "未提交",
          },
          {
            value: 0,
            name: "已完成",
          },
          {
            value: 0,
            name: "未批阅",
          },
        ];
      } else {
        this.echartvalo = [
          {
            value: this.echartLists.unpublish,
            name: "未提交",
          },
          {
            value: this.echartLists.published,
            name: "已完成",
          },
          {
            value: this.echartLists.draft,
            name: "未批阅",
          },
        ];
      }

      let secondChart = echarts.init(
        document.getElementById("secondechart"),
        "light"
      ); // 初始化echarts, theme为light
      secondChart.setOption({
        // echarts选项，所有绘图数据和样式都在这里设置
        title: {
          text: `${this.nametwo}`,
          subtext: "{a|百分比}",
          subtextStyle: {
            rich: {
              a: {
                fontSize: "8",
              },
            },
          },
          textStyle: {
            rich: {
              b: {
                fontSize: "12",
              },
            },
          },
          left: "center",
          top: "bottom",
        },
        legend: {
          //图表上方的图例

          data: ["未提交", "已完成", "未批阅"],
        },
        tooltip: {
          //鼠标放到图上的数据展示样式
          trigger: "axis",
        },
        series: [
          {
            top: 30,
            bottom: 30,
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              normal: {
                formatter(v) {
                  let text = v.name;

                  let percent_format = Math.round(v.percent) + "%";
                  if (text.length <= 6) {
                    return `${text}\n${percent_format}`;
                  } else if (text.length > 6 && text.length <= 12) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6
                    )}\n${percent_format}`);
                  } else if (text.length > 12 && text.length <= 18) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12)}\n${percent_format}`);
                  } else if (text.length > 18 && text.length <= 24) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18
                    )}\n${percent_format}`);
                  } else if (text.length > 24 && text.length <= 30) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18,
                      24
                    )}\n${text.slice(24)}\n${percent_format}`);
                  } else if (text.length > 30) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18,
                      24
                    )}\n${text.slice(24, 30)}\n${text.slice(
                      30
                    )}\n${percent_format}`);
                  }
                },
                textStyle: {
                  fontSize: 10,
                },
              },
            },
            // data:this.echartval,
            data: this.echartvalo,
          },
        ],
      }); // echarts设置选项

      // this.echartval = this.workList.map(function(ele){
      //   return {
      //     value:ele.total_points,name:ele.assignment_title
      //   }
      // })
      console.log(this.echartvalo);
    },
    getInit() {
      //   echartsOption.legend.data = this.workList.map(function (ele) {
      //     return ele.assignment_title;
      //   });
      //建课程发布任务情况表

      console.log(this.echartList);
      let echartval = [];
      let residue = 0;
      this.echartList.forEach((ele) => {
        echartval.push({
          value: ele.total_points,
          name: ele.assignment_title,
        });
        residue = residue + ele.total_points;
      });
      console.log(residue);
      console.log(echartval);
      echartval.push({
        value: 100 - residue,
        name: "未发布",
      });

      let myChart = echarts.init(
        document.getElementById("firstechart"),
        "light"
      ); // 初始化echarts, theme为light
      myChart.setOption({
        // echarts选项，所有绘图数据和样式都在这里设置
        title: {
          text: `${this.nameone}`,
          subtext: "{a|总任务百分比}",
          subtextStyle: {
            rich: {
              a: {
                fontSize: "8",
              },
            },
          },
          textStyle: {
            rich: {
              b: {
                fontSize: "12",
              },
            },
          },
          left: "center",
          top: "bottom",
        },
        legend: {
          //图表上方的图例
        },
        tooltip: {
          //鼠标放到图上的数据展示样式
          trigger: "axis",
        },
        series: [
          {
            top: 30,
            bottom: 30,
            name: "分数",
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              normal: {
                formatter(v) {
                  let text = v.name;

                  let percent_format = Math.round(v.percent) + "%";
                  if (text.length <= 6) {
                    return `${text}\n${percent_format}`;
                  } else if (text.length > 6 && text.length <= 12) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6
                    )}\n${percent_format}`);
                  } else if (text.length > 12 && text.length <= 18) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12)}\n${percent_format}`);
                  } else if (text.length > 18 && text.length <= 24) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18
                    )}\n${percent_format}`);
                  } else if (text.length > 24 && text.length <= 30) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18,
                      24
                    )}\n${text.slice(24)}\n${percent_format}`);
                  } else if (text.length > 30) {
                    return (text = `${text.slice(0, 6)}\n${text.slice(
                      6,
                      12
                    )}\n${text.slice(12, 18)}\n${text.slice(
                      18,
                      24
                    )}\n${text.slice(24, 30)}\n${text.slice(
                      30
                    )}\n${percent_format}`);
                  }
                },
                textStyle: {
                  fontSize: 10,
                },
              },
            },

            // data:this.echartval,
            data: echartval,
          },
        ],
      }); // echarts设置选项
    },
    initEchart() {
      let thirdChart = echarts.init(
        document.getElementById("thirdechart"),
        "light"
      );

      thirdChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "18%",
          left: "10%", // grid布局设置适当调整避免X轴文字只能部分显示
          right: "20%", // grid布局设置适当调整避免X轴文字只能部分显示
          bottom: "15%",
        },

        xAxis: {
          type: "category",
          data: this.forcourselist,
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            // rotate: -45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 5, // 刻度标签与轴线之间的距离
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 7; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于最大长度,进行处理
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //可以加一个是否是最后一行的判断
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "Register for courses",
            type: "bar",
            stack: "vistors",
            barWidth: "20%",
            data: this.coursedataarr,
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#749f83",
                    "#ca8622",
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                  ];
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }

                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.getData();
    this.getSecond();
    this.getInit();
    this.initEchart();
  },
};
</script>
<!-- 如果想让这里编写的样式只对当前组件有效，style上添加一个scoped属性-->
<style scoped>
.linechart {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}
#firstechart {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  margin-top: 5%;
}
#secondechart {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  margin-top: 5%;
}
#thirdechart {
  width: 1000px;
  height: 300px;
  margin: 0 auto;
  margin-top: 5%;
}
.echarts {
  width: 1400px;
  height: 400px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.sel {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.mydiv{
  width: 00%;
}

</style>
